# TypeScript 与 React 实战(组件篇上)

我们虽然已经通过前几节了解了 TypeScript 相关的基础知识，但是这不足以保证我们在实际项目中可以灵活运用，比如现在绝大部分前端开发者的项目都是依赖于框架的，因此我们需要几节来讲一下React与TypeScript应该如何结合运用。

如果你仅仅了解了一下 TypeScript 的基础知识就上手框架会碰到非常多的坑（比如笔者自己），如果你是 React 开发者一定要看过本节之后再进行实践。

# 快速启动 TypeScript 版 react

使用 TypeScript 编写 react 代码，除了需要 typescript 这个库之外，还至少需要额外的两个库:

yarn add -D @types/{react,react-dom}

可能有人好奇@types开头的这种库是什么？

由于非常多的 JavaScript 库并没有提供自己关于 TypeScript 的声明文件，导致 TypeScript 的使用者无法享受这种库带来的类型，因此社区中就出现了一个项目 DefinitelyTyped，他定义了目前市面上绝大多数的 JavaScript 库的声明，当人们下载 JavaScript 库相关的 @types 声明时，就可以享受此库相关的类型定义了。

当然，为了方便我们选择直接用 TypeScript 官方提供的 react 启动模板。

create-react-app react-ts-app --scripts-version=react-scripts-ts

# 无状态组件

我们初始化好了上述模板之后就需要进行正式编写代码了。

无状态组件是一种非常常见的 react 组件，主要用于展示 UI，初始的模板中就有一个 logo 图，我们就可以把它封装成一个 Logo 组件。

在 JavaScript 中我们往往是这样封装组件的：

import * as React from 'react'

export const Logo = props => {
    const { logo, className, alt } = props

    return (
        <img src={logo} className={className} alt={alt} />
    )
}

但是在TypeScript中会报错:

原因就是我们没有定义 props 的类型,我们用 interface 定义一下 props 的类型，那么是不是这样就行了：

import * as React from 'react'

interface IProps {
    logo?: string
    className?: string
    alt?: string
}

export const Logo = (props: IProps) => {
    const { logo, className, alt } = props

    return (
        <img src={logo} className={className} alt={alt} />
    )
}

这样做在这个